<template>
  <div class="Linkage">
    <div class="blueTitleStyle title">智能联动</div>
    <div
      class="Linkage-con"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <table></table>
      <div class="link">
        <span class="iconfont iconshishixiaoxitixing"></span>
        <div>联动描述:</div>
        <div>
          <marquee scrollamount="1">
            <span
              v-for="(item,index) in messageList"
              :key="index"
              @click="clickEvent(item)"
            >{{item.MSG}}</span>
          </marquee>
        </div>
      </div>
      <div class="configuration">
        <div v-for="(item, index) in getLinkageData" :key="index" @click="toZnld(item)">
          <div>{{item.value}}</div>
          <div>{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { HomepageModule } from "@/store/modules/Homepage";
import { GetSocketModule } from "@/store/modules/GetSocketData";
interface LinkageType {
  name: string;
  value: number;
}

@Component
export default class Linkage extends Vue {
  loading: boolean = false;
  messageList = [];
  public linkageData: LinkageType[] = [
    {
      name: "配置数", //台账数据哪什么字段展示？
      value: 0,
    },
    {
      name: "发生数",
      value: 0,
    },
  ];
  // 获取台账实时数据
  get getLinkageData() {
    let linkageData = this.linkageData;
    let getterSocketDataList = GetSocketModule.getterSocketDataList;
    // console.log("getterSocketDataList:", getterSocketDataList);

    let fss = linkageData[1].value || 0;
    getterSocketDataList.forEach((item) => {
      if (item.ld === 1) {
        fss++;
      }
    });
    linkageData[1].value = fss;
    return linkageData;
  }
  mounted() {
    this.loading = true;
    this.querySmartAction();
    this.getLinkageInfoList();
    this.setTimer();
  }
  beforeDestroy() {
    this.clearTimer();
  }
  get currentMap() {
    let mapByStation = HomepageModule.mapByStation;
    return mapByStation;
  }
  @Watch("currentMap")
  fetch() {
    this.querySmartAction();
    this.getLinkageInfoList();
  }
  clickEvent(item) {
    console.log(item);
    this.$router.push({
      path: "/auxiliarymonitor/linkage",
      query: {
        stationName: item.BDZID,
        deviceName: item.DEVICE_NAME,
      },
    });
  }
  // 跳转到智能联动
  toZnld(item: any) {
    // console.log("item:", item);
    let tab = "1";
    if (item.name == "配置数") {
      tab = "2";
    } else if (item.name == "发生数") {
      tab = "1";
    }
    let query = {
      tab: tab,
    };
    this.$router.push({ path: "/auxiliarymonitor/linkage", query });
  }
  // 接口查询
  querySmartAction() {
    let mapByStation = HomepageModule.mapByStation;
    let params: any = {};
    if (mapByStation.stationId) {
      params.bdzId = mapByStation.stationId;
    }
    (this as any).$services
      .querySmartAction({ data: params })
      .then((result: any) => {
        let data = result.data[0];
        this.linkageData[0].value = data.PZS;
        this.linkageData[1].value = data.FSS;
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }
  timer = null;
  setTimer() {
    this.clearTimer();
    this.timer = window.setInterval(() => {
      this.getLinkageInfoList();
    }, 30000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
  // 接口查询滚动信息
  getLinkageInfoList() {
    let mapByStation = HomepageModule.mapByStation;
    let params: any = {};
    if (mapByStation.stationId) {
      params.bdzId = mapByStation.stationId;
    }
    (this as any).$services
      .getLinkageInfoList({ data: params })
      .then((result: any) => {
        let list = result.data || [];
        this.messageList = list;
      });
  }
}
</script>

<style lang="scss" scoped>
.Linkage {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    .iconfont {
      color: red;
      font-size: 0.12rem;
      padding: 1px;
      padding-right: 5px;
    }
    .link {
      width: 3.91rem;
      margin: 0.2rem auto;
      background: rgba(9, 29, 101, 0.4);
      display: flex;
      justify-content: center;
      padding: 0.1rem 0px;
      > div {
        font-size: 0.14rem;
        &:nth-child(2) {
          width: 0.8rem;
        }
        &:nth-child(3) {
          width: 3rem;
        }
      }
    }
    .configuration {
      display: flex;
      justify-content: center;
      > div {
        > div {
          margin: 0px 0.15rem;
          text-align: center;
          cursor: pointer;
          &:nth-child(1) {
            width: 1rem;
            height: 1rem;
            padding-bottom: 0.2rem;
            background-image: url("../../../../assets/img/HomePage/bor_zz.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        &:nth-child(2) > div:nth-child(1) {
          background-image: url("../../../../assets/img/HomePage/bor_fs.png");
        }
      }
    }
  }
}
</style>

